<script setup lang="ts">
import { onMounted } from 'vue'
import { ref } from 'vue'
import { useStore } from '../store'
const { config } = useStore()
const imgsrc = ref(
  ''
)
const index = ref(0)
const wallpapers = ref([])
onMounted(() => {
  setTitle()
  getWallpperList()
})
function setTitle() {
  window.api.setTitle('壁纸软件1.2')
}
// 获取壁纸列表

function getWallpperList() {
  console.log('click')
  fetch('http://cdn.apc.360.cn/index.php?c=WallPaper&a=getAllCategoriesV2&from=360chrome')
    .then((res) => {
      return res.json()
    })
    .then((data) => {
      console.log(data)
      fetch(
        'http://wallpaper.apc.360.cn/index.php?c=WallPaper&a=getAppsByCategory&cid=9&start=0&count=100&from=360chrome'
      )
        .then((res) => res.json())
        .then((data) => {
          console.log(data,index)
          wallpapers .value = data.data
          imgsrc.value = data.data[index.value].url
        })
    })
}
function set() {
  console.log(imgsrc.value, config.saveDirectory)
  index.value+=1
  console.log(index.value)
  
          imgsrc.value = wallpapers.value[index.value].url

  window.api.setWallpaper(imgsrc.value, config.saveDirectory)
}
function downimg() {
  window.api.downloadImage(imgsrc.value)
}
</script>

<template>
  <div class="home">
    <img :src="imgsrc" alt="" srcset="" width="100%" />
    <a-button type="primary" @click="downimg">下载</a-button>

    <a-button type="primary" @click="set">设置</a-button>
    <a-float-button @click="click" />
    <a-button type="primary" @click="$router.push('/setting')">设置</a-button>
  </div>
</template>

<style scoped></style>
